<template>
  <view>
    <uni-nav-bar backgroundColor="linear-gradient(0deg, #597EF7 100%, #2F54EB 0%) !important" color="#FFFFFF" title="晟小原">
    </uni-nav-bar>
    <view class="content">

      <uni-search-bar
          class="uni-mt-10"
          radius="100"
          placeholder="输入网点/监控点名称或ID"
          clearButton="none"
          cancelButton="none"
          @confirm="search"
      />
      <uni-swiper-dot
          :info="info"
          :current="current"
          field="content"
          :mode="mode"
      >
        <swiper class="swiper-box" @change="change">
          <swiper-item v-for="(item, index) in info" :key="index">
            <view class="swiper-item">
              <image :src="item.url"></image>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <view v-for="(product, index) in productList" :key="index" class="product-item">
        <uni-row>
          <uni-col :span="7">
            <view style="align-items: center">
              <image
                  class="item-image"
                  :src="product.imgUrl ? product.imgUrl : '../static/icon/device1.png'"
                  mode=""
              ></image>
            </view>
          </uni-col>
          <uni-col :span="9">
            <view style="text-align: left; padding-top: 10px">
              {{ product.categoryName }}
            </view>
            <view class="device-desc">
              {{ product.productName }}
            </view>
          </uni-col>
          <uni-col :span="8">

          </uni-col>
        </uni-row>
      </view>
    </view>

    <tab-bar :current-page="0" />
  </view>
</template>

<script>
import {searchData, carouselData} from '@/utils/template'
import TabBar from "@/components/tab-bar/TabBar.vue";
import {getProductPage} from "@/api/device/product";

export default {
  components: {TabBar},
  computed: {
    searchData() {
      return searchData
    },
    carouselData() {
      return carouselData
    },

  },
  data() {
    return {
      info: [
        {
          url: "https://img95.699pic.com/photo/40075/6212.jpg_wh860.jpg",
        },
        {
          url: "https://ts1.cn.mm.bing.net/th/id/R-C.f48de931edb75db0149cd9fd8331a2fa?rik=tnr0uvVhfW%2bD4g&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40009%2f8510.jpg_wh1200.jpg&ehk=sjqN5AlRgAZ4QP070VOw5zrCp8JWFaSNiMO7c5JC6Vo%3d&risl=&pid=ImgRaw&r=0",
        },
      ],
      current: 0,
      mode: "round",
      productList: []
    }
  },
  onLoad: function () {
    this.getProductList()
  },
  methods: {
    search(e) {

    },
    getProductList(){
      getProductPage().then((res) => {
        console.log(res)
        this.productList = res.data.list
      })
    }
  }
}
</script>

<style>

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.content {
   text-align: center;
   height: 400upx;
   background: linear-gradient(0deg, #ffffff 0%, #597ef7 100%);
 }

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.title2 {
  font-size: 36rpx;
  color: #8f8f94;
  margin-top: 300rpx;
}

.box-bg {
  background-color: #f5f5f5;
  padding: 5px 0;
}

.swiper-item {
  height: 100%;
}
.swiper-item image {
  width: 96%;
  height: 100%;
  border-radius: 15px !important;
  margin: 0 2%;
}
.product-item{
  width: 96%;
  background-color: #ffffff;
  margin: 10px 2%;
  border-radius: 20px
}
.item-image {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  padding: 10px;
}
</style>
